<template>
	<view class="pageContent">
		<view class="info-card">
			<open-data class="avatar" v-if="token" type="userAvatarUrl"></open-data>
			<image class="avatar" v-if="!token" :src="images +'/avatar.png'" mode="widthFix" />
			<view class="loginBt" v-if="!token" @click="loginRed">
				点击登录
			</view>
			<div class="basic" v-if="token">
				<div class="username">{{info.name || '用户名'}}
					<text class="userType">
						<text v-if="info.membership">{{userMsg.membership+'-'}}
						</text>{{userMsg.roleName || '角色'}}
					</text>
				</div>
				<div class="userAddr">{{info.afterSaleCompanyName || '公司'}}</div>
			</div>
		</view>

		<view class="navsItem" @click="systemSet">
			<image class="navsItemIcon" :src="localImages +'/yw-mySet.png'" />
			<view class="navsItemTil">设置</view>
			<view class="rightArrowTip" v-if="formData.faceSwitch==0">未上传人脸</view>
			<view class="rightArrow"></view>
		</view>

	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				title: '123',
				token: 0,
				info: '',

			}
		},
		onLoad() {
		},
		onShow() {
			var token = wx.getStorageSync('token');
			this.token = token
			var info = wx.getStorageSync('info');
			if (token) {
				this.info = info
			}
		},
		methods: {
			loginRed() {
				wx.navigateTo({
					url: '/pages/index/login'
				})
			},
			systemSet() {
				if(this.token){
					wx.navigateTo({
						url: '/pages/index/systemSet'
					})
				}else {
					this.loginRed()
				}

			},
		},

	}
</script>

<style>
	.pageContent {}

	.container {
		width: 132rpx;
		height: 132rpx;
	}

	.info-card {
		position: relative;
		display: flex;
		width: 100vw;
		padding: 30rpx 30rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		/* border: 1px solid #f00; */
	}

	.avatar {
		width: 132rpx;
		height: 132rpx;
		border-radius: 50%;
		/* 因为使用border-radius: 50% ；类似于给它加了边框。但是是透明的，只有加overflow: hidden；轮廓才会渲染出来。 */
		overflow: hidden;
		margin-right: 33rpx;
	}
	
	.loginBt{
		height: 50rpx;
		line-height: 50rpx;
		color: #007AFF;
		border: 1px solid #007AFF;
		border-radius: 8rpx;
		padding: 0rpx 10rpx 0rpx 10rpx;
	}

	.username {
		font-size: 34rpx;
		line-height: 66rpx;
	}

	.userType {
		background: #007AFF;
		color: #FFFFFF;
		font-size: 26rpx;
		border-radius: 30rpx;
		padding: 6rpx 16rpx 6rpx 16rpx;
		margin-left: 20rpx;
	}

	.userAddr {
		color: #838383;
		font-size: 26rpx;
		line-height: 36rpx;
	}

	.navsItem {
		display: flex;
		padding: 32rpx 0rpx 32rpx 30rpx;
		margin: 12rpx 0rpx 0rpx 0rpx;
		background: #FFFFFF;
	}

	.navsItemIcon {
		display: inline-block;
		width: 36rpx;
		height: 36rpx;
		/* background: #007AFF; */
	}

	.navsItemTil {
		height: 42rpx;
		font-size: 30rpx;
		color: #030303;
		line-height: 42rpx;
		margin-left: 14rpx;
	}

	.rightArrow {
		right: 40rpx;
		margin-top: 6rpx;
		height: 22rpx;
		width: 22rpx;
	}
</style>
